<!doctype html>
<html lang="en">
  <head>
    <title>林科大校医</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="style.css">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  </head>
  <body>
       <!-- 左边菜单栏 -->
       <div class="navigation">

        <ul>
            <li class="list active">
                <b></b>
                <b></b>
                <a href="index.html">
                    <span class="icon">
                        <ion-icon name="home-outline"></ion-icon>
                    </span>
                    <span class="title">科室导航</span>
                </a>
            </li>
            <li class="list">
                <b></b>
                <b></b>
                <a href="departscheduling.html">
                    <span class="icon">
                        <ion-icon name="calendar-outline"></ion-icon>
                    </span>
                    <span class="title">排班</span>
                </a>
            </li>
    
            <li class="list">
                <b></b>
                <b></b>
                <a href="reservationinfo.html">
                    <span class="icon">
                        <ion-icon name="person-circle-outline"></ion-icon>
                    </span>
                    <span class="title">我的预约信息</span>
                </a>
            </li>
            <li class="list">
                <b></b>
                <b></b>
                <a href="RankingList.html">
                    <span class="icon">
                        <ion-icon name="thumbs-up-outline"></ion-icon>
                    </span>
                    <span class="title">点赞排行榜</span>
                </a>
            </li>
        </ul>
    </div>
    <div class="toggle">
        <ion-icon name="menu-outline" class="open"></ion-icon>
        <ion-icon name="close-outline" class="close"></ion-icon>
    </div>
    
    
    
    
    <div id="app">
        <!-- 导航栏 -->
                 <nav class="navbar navbar-expand-md  navbar-dark" style="background-color: rgb(255, 55, 55);"  id="daohang">
                <a class="navbar-brand" href="#">林科大校医 🏥 </a>
                <div class="collapse navbar-collapse" id="collapsibleNavId">
                    <!-- 在这个导航栏中定义每一个选项 -->
                    <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
                        <!-- 一个选项就是一个li标签 -->
                        <li class="nav-item active ml-3">
                            <a class="nav-link" href="#"><span class="sr-only">(current)</span></a>
                        </li>
                        <li class="nav-item ml-3">
                            <a class="nav-link" href="#"></a>
                        </li>
                    
                    </ul>
                    <p class="userName">用户名:{{userName}}</p>
                </div>
            </nav>
   

    <!--科室排班 -->
    <div class="container" >
        <h1 class="font-weight-light h2">{{curDepart.title}}</h1>
        <table class="table table-bordered" >
            <thead class="">
                <tr>
                    <th>星期一</th>
                    <th>星期二</th>
                    <th>星期三</th>
                    <th>星期四</th>
                    <th>星期五</th>
                    <th>星期六</th>
                    <th>星期日</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td v-for="(item, i) in 7" :key="i">
                        <div class="col-12"  v-for="(schedul, index) in schedulArr" :key="index" v-if="item==index+1">
                            <div v-once>{{schedul.time}}</div>
                            <div  v-if="schedul.count<30" @click="appointMent(schedul)">
                                {{schedul.doctor.name}} <span class="badge badge-primary">{{schedul.clinic.title}}</span>
                            </div>   
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    
   
</div>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
    <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
    integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
    crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
    integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
    crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
    integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
    crossorigin="anonymous"></script>
  </body>
</html>
<script>
     var url = `http://localhost:8080`;
    new Vue({
        el:"#app",
        data() {
            return {
                curDepart:"请选择科室",
                schedulArr:[],
                userName:"",
            }
        },
        mounted() {
            this.getSession();
            this.getSchedul(this.curDepart.id);
            this.userName=JSON.parse(sessionStorage.getItem("user")).name;
        },
        methods: {
            getSession(){
                this.curDepart = JSON.parse(sessionStorage.getItem("curDepart"));
                console.log(this.curDepart);
            },
            getSchedul(id){
                axios.get(`${url}/scheduling/getScheduling/${id}`)
                .then( (response)=> {
                    console.log(response.data);
                    this.schedulArr = response.data;
                    console.log(this.schedulArr);
                })
                .catch(function (error) {
                })
            },
            appointMent(schedul){
                sessionStorage.setItem("schedul",JSON.stringify(schedul));
                location.href="reservatio.html"
            }
        },
    })
</script>

<script>
    //添加动作
    let menuToggle = document.querySelector('.toggle');
    let navigation = document.querySelector('.navigation')
    menuToggle.onclick = function () {
        menuToggle.classList.toggle('active');
        navigation.classList.toggle('active');
    }
    //点击
    let list = document.querySelectorAll('.list');
    for (let i = 0; i < list.length; i++) {
        list[i].onclick = function () {
            let j = 0;
            while (j < list.length) {
                list[j++].className = 'list'
            }
            list[i].className = 'list active';
        }
    }
</script>
<style>
    .container{
      padding-top: 100px;
      padding-left: 150px;
    }
</style>
